<template>
  <div class="card p10 col">
    <label class="title">煮面</label>
    <div class="row_center mt">
      <label>放水策略</label>
      <el-select class="ml" v-model="ctx.water" style="width: 120px;">
        <el-option
          :label="TANK1"
          :value="TANK1"
          />
        <el-option
          :label="TANK2"
          :value="TANK2"
          />
        <el-option
          :label="TANK1_2"
          :value="TANK1_2"
          />
        <el-option
          :label="AUTO"
          :value="AUTO"
          />
      </el-select>
    </div>
    <div class="row_center mt">
      <label>蒸汽策略</label>
      <el-select class="ml" v-model="ctx.steam" style="width: 120px;">
        <el-option
          :label="TANK1"
          :value="TANK1"
          />
        <el-option
          :label="TANK2"
          :value="TANK2"
          />
        <el-option
          :label="TANK1_2"
          :value="TANK1_2"
          />
        <el-option
          :label="AUTO"
          :value="AUTO"
          />
      </el-select>
    </div>
    <div class="row_center mt">
      <label>k</label>
      <el-input v-model="ctx.k" style="width: 60px;"/>
      <label class="ml">pre_water</label>
      <el-input v-model="ctx.pre_water" style="width: 60px;"/>
    </div>
    <div class="row_center mt">
      <label>f</label>
      <el-input v-model="ctx.f" style="width: 60px;"/>
      <label class="ml">g</label>
      <el-input v-model="ctx.g" style="width: 60px;"/>
      <label class="ml">defroze</label>
      <el-input v-model="ctx.defroze" style="width: 60px;"/>
    </div>
    <div class="row_center mt">
      <label>e</label>
      <el-input v-model="ctx.e" style="width: 60px;"/>
      <label class="ml">pour_water</label>
      <el-input v-model="ctx.pour_water" style="width: 60px;"/>
    </div>
    <div class="row_center mt">
      <label>h</label>
      <el-input v-model="ctx.h" style="width: 60px;"/>
      <label class="ml">mix_soup</label>
      <el-input v-model="ctx.mix_soup" style="width: 60px;"/>
    </div>
    <div class="row_center mt">
      <label>i</label>
      <el-input v-model="ctx.i" style="width: 60px;"/>
      <label class="ml">clogging</label>
      <el-input v-model="ctx.clogging" style="width: 60px;"/>
      <el-button @click="onClickCooking" class="ml" type="primary">煮面</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import { reactive } from 'vue';
import { dialog } from '../../service/ui';
import { CookingOption, TankOption, TankProxy, cooking } from '../../service/heat_cmd';

const TANK1 = "热水罐1";
const TANK2 = "热水罐2";
const TANK1_2 = "热水罐1和2";
const AUTO = "自动";

interface Ctx {
  water: string,
  steam: string,

  k: string,
  pre_water: string,

  f: string,
  g: string,
  defroze: string,

  e: string,
  pour_water: string,

  h: string,
  mix_soup: string,

  i: string,
  clogging: string,
}

const ctx = reactive<Ctx>({
  water: AUTO,
  steam: AUTO,

  k: '125',
  pre_water: '50',

  f: '120',
  g: '135',
  defroze: '20',

  e: '130',
  pour_water: '150',

  h: '125',
  mix_soup: '20',

  i: '115',
  clogging: '5',
});


async function onClickCooking() {

  try {
    let tank: TankOption = {
      water: TankProxy.AUTO,
      steam: TankProxy.AUTO,
    };
    
    if (ctx.water == TANK1) {
      tank.water = TankProxy.TANK1;
    } else if (ctx.water == TANK2) {
      tank.water = TankProxy.TANK2;
    } else if (ctx.water == TANK1_2) {
      tank.water = TankProxy.TANK1;
    }

    if (ctx.steam == TANK1) {
      tank.steam = TankProxy.TANK1;
    } else if (ctx.steam == TANK2) {
      tank.steam = TankProxy.TANK2;
    } else if (ctx.steam == TANK1_2) {
      tank.steam = TankProxy.TANK1_2;
    }

    const cooking_option: CookingOption = {
      k: parseInt(ctx.k),
      pre_water: parseInt(ctx.pre_water),
      f: parseInt(ctx.f),
      g: parseInt(ctx.g),
      defroze: parseInt(ctx.defroze),
      e: parseInt(ctx.e),
      pour_water: parseInt(ctx.pour_water),
      h: parseInt(ctx.h),
      mix_soup: parseInt(ctx.mix_soup),
      i: parseInt(ctx.i),
      clogging: parseInt(ctx.clogging)
    };

    await cooking(tank, cooking_option);

    dialog.succ('煮面完成');

  } catch (msg) {
    dialog.err(msg);
  }
}

</script>
